<template>
  <div class="play-real-time">
    <div class="table-title">
      <span>实时监控</span>
      <el-button type="primary" plain size="small" @click="back">返回</el-button>
    </div>

    <div class="play-detail">
      <div class="detail-top">
        <div class="play-wrapper">
          <video id="myVideo" ref="videoRef" :width="100 + '%'" :height="videoH + 'px'" controls>
            <source :src="url"/>
          </video>

        </div>
        <div class="score-list">
          <div class="student-rank-title">
            <p class="tit">学生计分排名</p>
            <p class="out">导出表格</p>
          </div>

          <ul class="score-ranklist">
            <li>
              <p>姓名</p>
              <p>行为</p>
              <p>时间</p>
              <p>计分</p>
              <p>总分</p>
            </li>
            <li v-for="(item,index) in  scoreRankList" :key="index">
              <p>{{ item.name }}</p>
              <p>{{ item.behavior }}</p>
              <p>{{ item.time }}</p>
              <p>{{ item.count }}</p>
              <p>{{ item.score }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="detail-viedeo-analyse">
        <div class="class-title">
          <p>班级一监控视频分析</p>
          <ul class="choose-date">
            <li v-for="(item,i) in dateAll" :key="item.id" @click="changeStyle(i)"
                :class="{active: item.id == dateIndex}">{{ item.date }}
            </li>
          </ul>
        </div>
        <div class="chart-analyse">
          <ClassAnalysChart></ClassAnalysChart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ClassAnalysChart from "@/components/ClassAnalysChart"

export default {
  name: "RealTimePlay",
  components: {
    ClassAnalysChart
  },
  data() {
    let item = {
      name: '吕超',
      behavior: '正常',
      time: '10:14',
      count: '- -',
      score: '90'
    }
    return {
      url: "https://www.runoob.com/try/demo_source/mov_bbb.mp4",
      videoH: 666,
      scoreRankList: Array(3).fill(item),
      dateAll: [
        {
          id: '0',
          date: '今日',
        },
        {
          id: '1',
          date: '本周',
        },
        {
          id: '2',
          date: '本月',
        }
      ],
      dateIndex: 0,

    }
  },
  methods: {
    back() {
      this.$parent.showMonitorIf()
    },
    changeStyle(index) {
      this.dateIndex = index

      this.dateAll.forEach(item => {
        if (index == item.id) {
          console.log(item.date)
        }
      })

    },
  }
}
</script>

<style scoped lang="scss">
.table-title{
  padding: 0 20px;
}

.play-real-time {
  width: 100%;
  border-radius: 8px;
  padding: 0 43px 20px;

  .play-detail {
    width: 100%;
    box-sizing: border-box;
    margin-top: 20px;

    .detail-top {
      display: flex;
      justify-content: space-around;

      .play-wrapper {
        width: 70%;
        height: 666px;
        margin-right: 20px;
        background: #272A2E;
      }

      .score-list {
        width: 30%;
        height: 637px;
        overflow: auto;
        background: white;
        border-radius: 10px;

        .student-rank-title {
          height: 58px;
          line-height: 58px;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid rgba(40, 47, 54, 0.15);

          .tit {
            font-size: 18px;
            margin-left: 19px;
            font-weight: 400;
          }

          .out {
            font-size: 14px;
            margin-right: 18px;
            color: #1A73FF;
            cursor: pointer;
          }
        }

        .score-ranklist {
          padding: 10px 18px 10px 19px;

          li:nth-child(1) {
            padding: 8px 0 14px;
            border-top: none;

            p {
              color: rgba(153, 153, 153, 1);
            }
          }

          li {
            display: flex;
            padding: 9px 0;
            border-top: 1px solid rgba(40, 47, 54, 0.15);
            justify-content: space-between;

            p {
              font-size: 14px;
              font-weight: 400;
              max-width: 55px;
              width: 35px;
            }
          }
        }
      }
    }

    .detail-viedeo-analyse {
      height: 376px;
      width: 69%;
      border-radius: 5px;
      background: white;
      margin: 20px 0 12px 0;

      .class-title {
        display: flex;
        padding: 28px 0 10px 0;
        justify-content: space-between;

        p {
          margin-left: 30px;
          font-size: 16px;
        }

        .choose-date {
          height: 30px;
          line-height: 26px;
          margin-top: 5px;
          display: flex;
          justify-content: space-between;
          border-radius: 5px;
          margin-right: 38px;

          li {
            width: 72px;
            min-width: 72px;
            cursor: pointer;
            font-size: 14px;
            border-radius: 3px;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            text-align: center;
            border: 1px solid #DFE0E1;
          }
        }
      }

      .chart-analyse {
        height: 300px;
      }
    }
  }

  .active {
    color: rgba(26, 115, 255, 0.46) !important;
    background: rgba(26, 115, 255, 0.16);
    border-color: rgba(26, 115, 255, 0.45) !important;
  }
}
</style>
<style>
/* 滚动条样式修改 */
.score-list::-webkit-scrollbar-track { /* 定义滚动条轨道  内阴影+圆角*/
  background-color: #f5f5f5;
}

.score-list::-webkit-scrollbar { /*滚动条整体样式*/
  width: 10px;
  height: 6px;
  background-color: #f5f5f5;
  border-radius: 3px;
}

.score-list::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
  border-radius: 100px;
  height: 3px;
  background-color: #dbdbdb;
}
</style>
